<template>
    <div class="userAdd" v-loading="loading">
        <header>新增账号</header>
        <div class="form_contents">
            <div class="wrap">
                <div class="user_id common">
                    <p>账号：</p>
                    <el-input v-model.trim="userID" placeholder="请输入登录账号"></el-input>
                </div>
                <div class="user_store common">
                    <p>所属门店：</p>
                    <template>
                        <el-select v-model="store" placeholder="请选择">
                            <el-option v-for="item in options" :key="item.COMP_ID" :label="item.SHOP_NAME" :value="item.COMP_ID"> </el-option>
                        </el-select>
                    </template>
                </div>
                <div class="user_name common">
                    <p>姓名：</p>
                    <el-input v-model.trim="name" placeholder="起个名字"></el-input>
                </div>
                <div class="user_password common">
                    <p>密码：</p>
                    <el-input v-model.trim="password" placeholder="由数字组成"></el-input>
                </div>
                <div class="user_mobile common">
                    <p>联系方式：</p>
                    <el-input v-model.trim="mobile" placeholder="电话号码"></el-input>
                </div>
                <div class="user_switch common">
                    <p>是否启用：</p>
                    <el-switch v-model="userSwitch" active-color="#13ce66" inactive-color="#ff4949"> </el-switch>
                    <span style="font-size:12px;color:#949494;margin-left:10px;">（绿色表示启用）</span>
                </div>
                <div class="user_jurisdiction">
                    <div class="wrap">
                        <template>
                            <span class="title">权限：</span>
                            <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange" style="margin-left:10px">全选</el-checkbox>
                            <div style="margin: 15px 0;"></div>
                            <el-checkbox-group style="width:500px;" v-model="CheckedJurisdiction" @change="handleCheckedJurisdictionChange">
                                <el-checkbox style="margin:10px;width:100px;" v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
                            </el-checkbox-group>
                        </template>
                    </div>
                </div>
                <div class="buttons common">
                    <el-button type="danger" style="background:#e7251a;" @click.native="submits">提交</el-button>
                    <el-button @click.native="cancels">取消</el-button>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    import { setCookie, getCookie,removeCookie } from '@/assets/js/cookie'
    var jurisdiction = [];
    export default {
        name: "userAdd",
        data() {
            return {
                userID: "", // 账号
                store: "", // 所属门店
                name: "", // 姓名
                password: "", // 密码
                mobile: "", // 手机号码
                userSwitch: true, // 是否启用                
                options: [],
                // 权限管理多选框
                checkAll: false,
                CheckedJurisdiction: [],
                cities: jurisdiction,
                isIndeterminate: false,
                allData: '',
                flags:true,//重复提交开关
                flagss:true,
                loading:true,
            };
        },
        computed: {},
        created() {
        	//离开页面提醒
	    	window.onbeforeunload = function(e) {
	            var e = window.event || e;
	            e.returnValue = ("在新增或编辑时，关闭选项卡将导致数据无法保存");
	        }
            this.get4SCafeShopList();
            this.getDetail();
        },
        methods: {        	
            //账号详情
            getDetail() {            	
	        	this.loading = true;
                let self = this;
                this.$axiosPost('/4SCAFE/cafeUser/getCafeUserDetail.action').then(res => {
                    //console.log(res);                                       
                    if(res.STATUS_CODE === 1) {
                    	this.loading = false;
                        this.allData = res;
                        this.allData.MENU_DATA.forEach((v) => {
                            v.MENUS.forEach((k) => {
                                self.$set(k, 'flag', 0);
                                jurisdiction.push(k.SECMENUNAME);
                            })
                        })
                        //console.log(this.allData);
                    }
                })
            },
            //获取所有门店
            get4SCafeShopList() {
                this.$axiosPost('/4SCAFE/CafeActivitySystem/get4SCafeShopList.action').then(res => {
                    if(res.STATUS_CODE === 1) {
                        this.options = res.SHOP_LIST;
                        this.store = this.options[0].COMP_ID; 
                    }
                })
            },
            //全选
            handleCheckAllChange(val) {
                let self = this;
                this.allData.MENU_DATA.forEach((v) => {
                    v.MENUS.forEach((k) => {
                        val ? self.$set(k, 'flag', 1) : self.$set(k, 'flag', 0);
                    })
                })
                this.CheckedJurisdiction = val ? jurisdiction : [];
            },
            //单个选中
            handleCheckedJurisdictionChange(value) {
            	//console.log(value);            	
            	let self = this;
            	this.allData.MENU_DATA.forEach((v) => {
                    v.MENUS.forEach((k) => {                    	
                        if(value.indexOf(k.SECMENUNAME)>-1){                        	
                        	self.$set(k, 'flag', 1);                        	
                        }else{
                        	self.$set(k, 'flag', 0);
                        }
                    })
                })            	            
                let checkedCount = value.length;
                this.checkAll = checkedCount === this.cities.length;
                this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
            },
            //提交
            submits() {              	
                if(this.userID == "") {
                    this.$alert("请输入账号", "提示", {
                        confirmButtonText: "确定"
                    });
                    return;
                }                            
                if(this.store == "") {
                    this.$alert("请选择门店", "提示", {
                        confirmButtonText: "确定"
                    });
                    return;
                }
                if(this.name == "") {
                    this.$alert("请输入姓名", "提示", {
                        confirmButtonText: "确定"
                    });
                    return;
                }
                if(this.password == "") {
                    this.$alert("请输入密码", "提示", {
                        confirmButtonText: "确定"
                    });
                    return;
                }
                if(this.mobile == "") {
                    this.$alert("请输入联系方式", "提示", {
                        confirmButtonText: "确定"
                    });
                    return;
                }
                if(isNaN(this.mobile)) {
                    this.$alert("请输入正确的联系方式", "提示", {
                        confirmButtonText: "确定"
                    });
                    return;
                }
                let obj = {};
                let objj = {};
                let arr = [];
                let shopN = '';
                this.options.forEach((m)=>{
                	if(this.store === m.COMP_ID){
                		shopN = m.SHOP_NAME;
                	}
                })
                this.allData.MENU_DATA.forEach((v)=>{            		
            		v.MENUS.forEach((k)=>{
            			if(k.flag === 1){
            				arr.push(k);            				
            			}            			
            		})
            	})                
                obj.LOGINNAME = this.userID;                
                obj.COMPID = this.store;
                obj.SHOPNAME = shopN;
                obj.USERNAME = this.name;
                obj.LOGINPWD = this.password;
                obj.PHONE = this.mobile;
                obj.STATUS = this.userSwitch ? 1 : 0;
                obj.POWERPARAM = JSON.stringify(arr);  
                //console.log(obj.POWERPARAM);                
                if(!this.flags){
                	return false;
                }
                this.$axiosPost('/4SCAFE/cafeUser/saveCafeUser.action', obj).then(res => {                	
                    //console.log(res);
                    this.flags = false;                    
                    if(res.STATUS_CODE === 1) {                    	
                    	this.$message.success('添加账号成功');
                    	setTimeout(()=>this.$router.push({
                    		path:'/setting/userSet'
                    	}),2000)
                    	setTimeout(()=>this.flags=true,4000)
                    }
                })
            },
            //取消
            cancels() {
                this.$confirm('此操作将不会保存信息, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$router.push({
                        path: '/setting/userSet'
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消操作'
                    });
                });
            },
        },
    };
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
    .el-button {
        margin: 0 15px;
    }
    /* 上传样式start */
    
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
        border-color: #409eff;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 90px;
        height: 90px;
        line-height: 90px;
        text-align: center;
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
    }
    .avatar {
        width: 90px;
        height: 90px;
        display: block;
    }
    /* 上传样式end */
    
    .userAdd {
        header {
            background: #fff;
            font-size: 22px;
            font-weight: 700;
            padding: 20px;
        }
        .form_contents {
            overflow: hidden;
            .wrap {
                width: 1000px;
            }
            padding-bottom: 40px;
            p {
                white-space: nowrap;
                width: 150px;
                text-align: right;
            }
            width: 97%;
            margin: 25px auto;
            background: #fff;
            padding-top: 40px;
            .common {
                width: 50%;
                margin: 26px auto;
                display: flex;
                align-items: center;
            }
            .first_b, .second_b, .third_b {
                img {
                    width: 22px;
                    height: 22px;
                    cursor: pointer;
                    margin-left: 10px;
                }
            }
            .upload_img {
                align-items: flex-start;
            }
            .user_store {
                width: 57%;
            }
            .user_switch {
                width: 58%;
            }
            .user_id {
                width: 50%;
            }
            .user_jurisdiction {
                display: flex;
                -webkit-display: flex;
                margin: 50px 0;
                .wrap {
                    width: 350px;
                    margin-left: 318px;
                    .title {
                        font-size: 14px;
                    }
                }
            }
            .buttons {
                width: 10%;
            }
        }
    }
</style>